<template>
  <div class="yield">
    <div class="ui_left_mask" :class="hiddenUI ? 'hiddenLeft' : ''">
      <div class="ui_left">
        <div class="nape_content" style="margin-top: 0">
          <div class="content_title">
            <span>当前计划完成情况</span>
          </div>
          <div class="center_content">
            <!-- <charts-chen container="leftTopeChart" width="100%" height="100%" :options="leftTopeChart" /> -->
            <div class="table_box pro_box">
              <div class="tableHead">
                <span style="width: 40%">编号</span>
                <span>完成度</span>
                <span>剩余时间</span>
              </div>
              <div
                class="tableContent"
                v-if="planCompletionTable.list.length != 0"
              >
                <div
                  class="tableItem"
                  v-for="(item, index) in planCompletionTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }"
                  :key="index"
                  @click="planDetails(item)"
                  :class="
                    planCompletionTable.active == item.code ? 'active' : ''
                  "
                >
                  <div class="textContent" style="width: 40%">
                    <span class="scrollText">{{ item.code }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}%</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.day }}</span>
                  </div>
                </div>
              </div>
              <div
                class="tableContent"
                v-else-if="!planCompletionTable.loading"
              >
                <div class="noData"></div>
              </div>
              <div class="tableContent spin" v-if="planCompletionTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>计划详情</span>
          </div>
          <div class="center_content ">
            <!-- <charts-chen container="leftMiddleeChart" width="100%" height="100%" :options="leftMiddleeChart" /> -->
            <div class="table_box pro_box">
              <div class="tableHead">
                <span style="width: 50%">名称</span>
                <span style="width: 50%">完成情况</span>
              </div>
              <div class="tableContent" v-if="leftBottomTable.list.length != 0">
                <div
                  class="tableItem"
                  v-for="(item, index) in leftBottomTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }"
                  :key="index"
                  @click="lookSchedule(item)"
                  :class="leftBottomTable.active == item.name ? 'active' : ''"
                >
                  <div class="textContent" style="width: 50%">
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="textContent" style="width: 50%">
                    <span>{{ item.finish }} / {{ item.unFinshed }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!leftBottomTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent spin" v-if="leftBottomTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui_right_mask" :class="hiddenUI ? 'hiddenRight' : ''">
      <div class="ui_right">
        <!-- <div class="nape_content" style="margin-top: 0">
          <div class="content_title">
            <span>生产订单</span>
          </div>
          <div class="center_content">
            <charts-chen
              container="rightTopChart"
              width="100%"
              height="100%"
              :options="rightTopChart"
            />

          </div>
        </div> -->
        <div class="nape_content">
          <div class="content_title">
            <span>生产订单</span>
          </div>
          <div class="center_content">
            <!-- 筛选按钮 -->
            <div class="query_box">
              <div class="select_box">
                <div
                  class="sel_item"
                  v-for="(item, index) in proSelectData"
                  :key="'00' + index"
                  :class="rightTopTable.type == item.name ? 'active' : ''"
                  @click="rightTopTable.type = item.name"
                >
                  {{ item.name }}
                </div>
              </div>
              <a-range-picker
                v-model:value="rightTopTable.time"
                show-time
                size="small"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-show="rightTopTable.type == '历史订单'"
              />
            </div>
            <div class="table_box pro_box">
              <div class="tableHead">
                <span style="width: 25%">客户货号</span>
                <span>中文品名</span>
                <span>订货数量</span>
                <span>单位</span>
                <span>交付日期</span>
              </div>
              <div class="tableContent" v-if="rightTopTable.list.length != 0">
                <div
                  class="tableItem"
                  v-for="(item, index) in rightTopTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }"
                  :key="index"
                  @click="webToUeMessige('车间原材料态势', item.name)"
                >
                  <div class="textContent" style="width: 25%; margin-left: 3px">
                    <span class="scrollText">{{ item.code }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.unit }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightTopTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightTopTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>生产计划</span>
          </div>
          <div class="center_content">
             <!-- 筛选按钮 -->
             <div class="query_box">
              <div class="select_box">
                <div
                  class="sel_item"
                  v-for="(item, index) in planSelectData"
                  :key="'00' + index"
                  :class="rightCenterTable.type == item.name ? 'active' : ''"
                  @click="rightCenterTable.type = item.name"
                >
                  {{ item.name }}
                </div>
              </div>
              <a-range-picker
                v-model:value="rightCenterTable.time"
                show-time
                size="small"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-show="rightCenterTable.type == '历史计划'"
              />
            </div>
            <div class="table_box pro_box">
              <div class="tableHead">
                <span style="width: 20%">计划日期</span>
                <span style="width: 25%">计划类型</span>
                <span>计划数量</span>
                <span>单位</span>
                <span>交付日期</span>
              </div>
              <div
                class="tableContent"
                v-if="rightCenterTable.list.length != 0"
              >
                <div
                  class="tableItem"
                  v-for="(item, index) in rightCenterTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }"
                  :key="index"
                  @click="webToUeMessige('车间半成品态势', item.name)"
                >
                  <div class="textContent" style="width: 20%">
                    <span>{{ item.planTime }}</span>
                  </div>
                  <div class="textContent" style="width: 25%">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.unit }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.subTime }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightCenterTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightCenterTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 计划详情进度条 -->
    <div class="scheduling" v-show="planInfoData.show">
      <div class="count_box">
        <div
          class="box_item"
          v-for="(item, index) in scheduleData"
          :key="'00' + index"
        >
          <div class="num_rate">
            <span :style="item.finihNum != item.planNum ? 'color:red;' : ''">{{
              item.finihNum
            }}</span>
            / {{ item.planNum }}
          </div>
          <div class="num_checked">
            <a-checkbox
              v-model:checked="item.isChecked"
              @change="checkedPlanNum"
            ></a-checkbox>
          </div>
          <div class="num_time">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onUnmounted,
  nextTick,
  watch
} from 'vue';
import * as echarts from 'echarts';
import { delay, webToUeMessige } from '../../utils';
import dayjs from 'dayjs';

export default defineComponent({
  props: {
    showUI: {
      type: Boolean
    },
    addschedulePoint: {
      type: Function,
      default: null
    }
  },
  components: {},
  setup(props) {
    const data = reactive({
      hiddenUI: false,
      leftTopeChart: {
        title: {
          text: '',
          subtext: '在手订单数: 590',
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          subtextStyle: {
            color: '#fff',
            fontSize: 16
          },
          x: 'center',
          top: 0
        },
        grid: {
          left: 10,
          bottom: 30,
          top: 50,
          right: 10
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          data: ['按期完成', '提前完成', '逾期完成', '未完成'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#beceff',
              fontSize: 16
            },
            margin: 15 // 刻度标签与轴线之间的距离。
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '顶部圆',
            tooltip: {
              show: false
            },
            type: 'pictorialBar',
            symbolSize: [30, 15],
            symbolOffset: [0, -10],
            z: 10,
            data: (() => {
              const list = [
                { color: 'rgba(0, 230, 169, 1)', value: 300 },
                { color: 'rgba(110, 231, 250, 1)', value: 200 },
                { color: 'rgba(182, 249, 113, 1)', value: 50 },
                { color: 'rgba(138, 101, 224, 1)', value: 40 }
              ];
              return list.map((item) => {
                return {
                  value: item.value,
                  symbolPosition: 'end',
                  itemStyle: {
                    normal: {
                      color: item.color
                    }
                  }
                };
              });
            })()
          },
          {
            name: '底部圆',
            tooltip: {
              show: false
            },
            type: 'pictorialBar',
            symbolSize: [60, 20],
            symbolOffset: [0, 10],
            z: 12,
            data: (() => {
              const list = [300, 200, 50, 40];
              return list.map((item) => {
                return {
                  value: item,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: '#43bafe',
                      borderWidth: 5
                    }
                  }
                };
              });
            })()
          },
          {
            type: 'bar',
            barWidth: 30,
            data: (() => {
              const list = [
                {
                  color1: 'rgba(0, 230, 169, 1)',
                  color2: 'rgba(0, 230, 169, 0.3)',
                  value: 300
                },
                {
                  color1: 'rgba(110, 231, 250, 1)',
                  color2: 'rgba(110, 231, 250, 0.3)',
                  value: 200
                },
                {
                  color1: 'rgba(182, 249, 113, 1)',
                  color2: 'rgba(182, 249, 113, 0.3)',
                  value: 50
                },
                {
                  color1: 'rgba(138, 101, 224, 1)',
                  color2: 'rgba(138, 101, 224, 0.3)',
                  value: 40
                }
              ];
              return list.map((item) => {
                return {
                  value: item.value,
                  label: {
                    normal: {
                      show: true,
                      position: 'top',
                      distance: 10,
                      textStyle: {
                        color: item.color1,
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: item.color2
                          },
                          {
                            offset: 1,
                            color: item.color1
                          }
                        ]
                      }
                    }
                  }
                };
              });
            })()
          }
        ]
      },
      leftMiddleeChart: {
        title: {
          subtext: '在手订单数: 1200',
          subtextStyle: {
            color: '#fff',
            fontSize: 16
          },
          right: 0,
          top: 0
        },
        xAxis: {
          max: 400,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 50,
          top: 30,
          right: 90,
          bottom: 0
        },
        tooltip: {
          formatter: '{b}',
          show: true,
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        dataset: {
          source: [
            ['按期完成', 400, 400],
            ['提前完成', 300, 400],
            ['逾期完成', 300, 400],
            ['未完成', 200, 400]
          ]
        },
        yAxis: [
          {
            type: 'category',
            inverse: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 15,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(110, 231, 250, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 230, 169, 0.6)' // 100% 处的颜色
                  }
                ]
              }
            },
            label: {
              normal: {
                show: true,
                position: [0, '-150%'],
                formatter: (obj: any) => {
                  return `${obj.name}:${obj.value[1]}`;
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                }
              }
            },
            z: 1,
            animationEasing: 'elasticOut'
          },
          {
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'rect',
            symbolSize: [10, 15],
            symbolBoundingData: 400,
            itemStyle: {
              normal: {
                color: 'gray'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [10, 2],
                textStyle: {
                  color: '#ccc',
                  fontSize: 12
                }
              }
            },
            z: 0,
            animationEasing: 'elasticOut'
          }
        ]
      },
      leftBottomeChart: {
        title: {
          subtext: '在手订单数: 888',
          subtextStyle: {
            color: '#fff',
            fontSize: 16
          },
          left: 0,
          top: 0
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%'
        },
        legend: {
          show: true,
          bottom: 0,
          right: 0,
          itemGap: 18,
          itemWidth: 9,
          itemHeight: 9,
          orient: 'vertical',
          icon: 'circle',
          selectedMode: true,
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          }
        },
        toolbox: {
          show: false
        },
        series: [
          {
            type: 'pie',
            clockWise: false,
            radius: ['50%', '65%'],
            center: ['40%', '55%'],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'outside',
                  color: '#ddd',
                  formatter: (item: any) => {
                    return `${item.name} ${item.value}个`;
                  }
                },
                labelLine: {
                  show: true,
                  color: '#00ffff'
                }
              }
            },
            data: (() => {
              const list = [] as any;
              const scaleData = [
                { name: '按期完成', value: 688, color: '#00cfff' },
                { name: '提前完成', value: 100, color: '#00ffff' },
                { name: '逾期完成', value: 50, color: '#ffe000' },
                { name: '未完成', value: 50, color: '#8a65e0' }
              ];
              scaleData.forEach((item: any) => {
                list.push({
                  name: item.name,
                  value: item.value,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 20,
                      borderColor: item.color,
                      shadowColor: item.color
                    }
                  }
                });
              });
              return list;
            })()
          }
        ]
      },

      // 当前计划完成情况(左框)
      planCompletionTable: {
        list: [
          {
            code: '编号45353554643451',
            num: 10,
            day: 12,
            details: [
              { name: '花开富贵', finish: 142, unFinshed: 300 },
              { name: '满江红', finish: 120, unFinshed: 300 },
              { name: '冲天炮', finish: 200, unFinshed: 300 },
              { name: '货号4', finish: 120, unFinshed: 300 },
              { name: '货号5', finish: 188, unFinshed: 300 }
            ]
          },
          {
            code: '编号4535397456611',
            num: 60,
            day: 1,
            details: [
              { name: '花开富贵', finish: 120, unFinshed: 300 },
              { name: '满江红', finish: 120, unFinshed: 455 },
              { name: '冲天炮', finish: 200, unFinshed: 300 },
              { name: '货号4', finish: 120, unFinshed: 555 },
              { name: '货号5', finish: 250, unFinshed: 300 }
            ]
          },
          {
            code: '编号4533447456611',
            num: 80,
            day: 7,
            details: [
              { name: '花开富贵', finish: 120, unFinshed: 300 },
              { name: '满江红', finish: 120, unFinshed: 300 },
              { name: '冲天炮', finish: 43, unFinshed: 300 },
              { name: '货号4', finish: 66, unFinshed: 300 },
              { name: '货号5', finish: 88, unFinshed: 300 }
            ]
          },
          {
            code: '编号4535397657611',
            num: 50,
            day: 5,
            details: [
              { name: '花开富贵', finish: 120, unFinshed: 300 },
              { name: '满江红', finish: 120, unFinshed: 300 },
              { name: '冲天炮', finish: 200, unFinshed: 300 },
              { name: '货号4', finish: 120, unFinshed: 300 },
              { name: '货号5', finish: 250, unFinshed: 300 }
            ]
          }
        ],
        loading: false,
        active: ''
      },
      // 计划详情(左框)
      leftBottomTable: {
        list: [] as any,
        loading: false,
        active: ''
      },
      // 计划详情时间进度展示数据
      scheduleData: [] as any,
      // 存储当前点击的计划时间数量详情数据
      planInfoData: {
        data: null as any, // 计划时间数量详情数据--点位
        show: false
      },
      // 存储当前计划详情图层
      planName: '',
      // 右边框
      rightTopChart: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          show: true,
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          },
          formatter: (obj: any) => {
            return `${obj[0].axisValue}:<br>${obj[0].seriesName}: ${obj[0].value[1]}<br>${obj[1].seriesName}: ${obj[1].value[2]}`;
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 0,
          top: 50,
          containLabel: true
        },
        legend: {
          left: 'center',
          top: 1,
          textStyle: {
            color: '#ffff',
            fontSize: 14
          },
          itemWidth: 18,
          itemHeight: 10
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              show: true
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff', // x轴颜色
              lineHeight: 22
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '万',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLine: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(135,140,147,0.3)'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        dataset: {
          source: [
            ['喷花车间', 600, 300, 600, 300, 600, 300],
            ['礼花车间', 500, 300, 500, 300, 500, 300],
            ['火箭车间', 300, 260, 300, 260, 300, 260]
          ]
        },
        series: [
          {
            name: '车间季度计划',
            type: 'bar',
            barWidth: '30',
            itemStyle: {
              normal: {
                opacity: 0.7,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00e5a8'
                  },
                  {
                    offset: 1,
                    color: '#7EC0EE'
                  }
                ]),
                barBorderRadius: 0
              }
            },
            label: {
              show: true,
              position: [5, -18],
              color: '#00f8ff',
              fontSize: 12
            }
          },
          {
            name: '车间当前产值',
            type: 'bar',
            barWidth: '30',
            itemStyle: {
              normal: {
                opacity: 0.7,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#b6f971'
                  },
                  {
                    offset: 1,
                    color: '#7EC0EE'
                  }
                ]),
                barBorderRadius: 0
              }
            },
            label: {
              show: true,
              position: [5, -18],
              color: '#00f8ff',
              fontSize: 12
            }
          },
          {
            // name: '顶部方块',
            type: 'pictorialBar',
            symbol: 'path://M214,1079l8-6h16l8,6-8,6H222Z',
            symbolSize: [30, 8],
            symbolOffset: [-18, -5],
            symbolPosition: 'end',
            z: 12,
            color: '#00e5a8'
          },
          {
            // name: '顶部方块',
            type: 'pictorialBar',
            symbol: 'path://M214,1079l8-6h16l8,6-8,6H222Z',
            symbolSize: [30, 8],
            symbolOffset: [18, -5],
            symbolPosition: 'end',
            z: 12,
            color: '#b6f971'
          },
          {
            // name: '底部方块',
            type: 'pictorialBar',
            symbol: 'path://M214,1079l8-6h16l8,6-8,6H222Z',
            symbolSize: [30, 8],
            symbolOffset: [-18, 4],
            z: 12,
            color: '#7EC0EE'
          },
          {
            // name: '底部方块',
            type: 'pictorialBar',
            symbol: 'path://M214,1079l8-6h16l8,6-8,6H222Z',
            symbolSize: [30, 8],
            symbolOffset: [18, 4],
            color: '#7EC0EE',
            z: 12
          }
        ]
      },
      // 生产订单筛选
      proSelectData: [
        { id: 1, name: '当前订单' },
        { id: 2, name: '历史订单' }
      ],
      rightTopTable: {
        type: '当前订单',
        time: [
          dayjs().subtract(3, 'day').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ] as any[],
        list: [
          {
            code: '51020桃红柠檬海蓝',
            name: '朵朵繁花',
            num: 3000,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '彩虹之舞',
            num: 2800,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '星空璀璨',
            num: 2400,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '烟雨缤纷',
            num: 2000,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '原材料5',
            num: 1600,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '原材料6',
            num: 1200,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '原材料7',
            num: 800,
            unit: '件',
            time: '2024-5-30'
          },
          {
            code: '51020桃红柠檬海蓝',
            name: '原材料8',
            num: 300,
            unit: '件',
            time: '2024-5-30'
          }
        ],
        loading: true
      },
      // 生产计划筛选
      planSelectData: [
        { id: 1, name: '当前计划' },
        { id: 2, name: '历史计划' }
      ],
      rightCenterTable: {
        type: '当前计划',
        time: [
          dayjs().subtract(3, 'day').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ] as any[],
        list: [
          {
            planTime: '2024-5-10',
            name: '朵朵繁花',
            num: 3000,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '彩虹之舞',
            num: 2800,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '星空璀璨',
            num: 2400,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '烟雨缤纷',
            num: 2000,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '半成品5',
            num: 1600,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '半成品6',
            num: 1200,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '半成品7',
            num: 800,
            unit: '件',
            subTime: '2024-5-30'
          },
          {
            planTime: '2024-5-10',
            name: '半成品8',
            num: 300,
            unit: '件',
            subTime: '2024-5-30'
          }
        ],
        loading: false
      }
    });

    onMounted(() => {
      nextTick(() => {
        delay(600).then(() => {
          data.rightTopTable.loading = false;
        });
      });
    });

    watch(
      () => props.showUI,
      (val) => {
        data.hiddenUI = val;
      }
    );

    // 点击当前计划完成情况
    const planDetails = (item: any) => {
      console.log(item);
      // 清空进度情况数据
      clearData();
      data.planCompletionTable.active = item.code;
      data.leftBottomTable.loading = true;
      data.leftBottomTable.list = [];
      setTimeout(() => {
        data.leftBottomTable.list = item.details;
        data.leftBottomTable.loading = false;
      }, 600);
    };

    // 点击计划详情
    const lookSchedule = async (item: any) => {
      // 清空进度情况数据
      clearData();
      console.log(item);
      // 显示进度情况
      data.planInfoData.show = true;
      data.leftBottomTable.active = item.name;

      // 选择数据、
      data.scheduleData = [
        {
          id: 1,
          planNum: 60,
          finihNum: 24,
          isChecked: false,
          time: '05-11'
        },
        {
          id: 2,
          planNum: 60,
          finihNum: 60,
          isChecked: false,
          time: '05-12'
        },
        {
          id: 3,
          planNum: 40,
          finihNum: 8,
          isChecked: false,
          time: '05-13'
        },
        {
          id: 4,
          planNum: 40,
          finihNum: 14,
          isChecked: false,
          time: '05-14'
        },
        {
          id: 5,
          planNum: 50,
          finihNum: 8,
          isChecked: false,
          time: '05-15'
        },
        {
          id: 6,
          planNum: 50,
          finihNum: 6,
          isChecked: false,
          time: '05-16'
        },
        {
          id: 7,
          planNum: 50,
          finihNum: 22,
          isChecked: false,
          time: '05-17'
        }
      ];
      // 点位数据
      data.planInfoData.data = await import(
        '../../../public/json/烟花计划详情.json'
      );
    };

    // 勾选生产进度条
    const checkedPlanNum = () => {
      // 数量点位层的name
      data.planName =
        data.planCompletionTable.active + '-' + data.leftBottomTable.active;
      // 存储是否勾选
      let isCheck = data.scheduleData.findIndex((item: any) => {
        return item.isChecked == true;
      });
      console.log(isCheck);
      // 判断是否有勾选,如果存在勾选，则地图新增展示框
      if (isCheck !== -1) {
        let dataInfo = data.scheduleData.filter((item: any) => {
          return item.isChecked == true;
        });
        // console.log(dataInfo, '>>>>', data.planInfoData.data.default);
        let pointData = data.planInfoData.data.default;
        // 需要渲染的数据
        let dataArr = [] as any[];
        dataInfo.forEach((item: any) => {
          dataArr = dataArr.concat(
            pointData[item.time].map((el: any) => {
              return { ...el, time: item.time };
            })
          );
        });
        // console.log(dataArr, '>>>>>>>>>');
        // 将一个对象数组按name去重
        let uniqueArray = dataArr.filter((value, index, self) => {
          return self.findIndex((obj) => obj.name === value.name) === index;
        });
        // console.log(uniqueArray);
        // 计算plan值和finish值
        let newArray = [] as any[];
        uniqueArray.forEach((item: any) => {
          let obj = {
            ...item,
            planVal: 0,
            finishVal: 0
          };
          dataArr.forEach((e) => {
            if (e.name == item.name) {
              obj.planVal += e.plan;
              obj.finishVal += e.finish;
            }
          });
          newArray.push(obj);
        });
        console.log(newArray);
        props.addschedulePoint(data.planName, newArray, true);
      } else {
        console.log('隐藏图层：' + data.planName);
        // 隐藏对应图层的图标
        props.addschedulePoint(data.planName, [], false);
      }
    };

    // 清空进度情况数据
    const clearData = () => {
      // 显示进度情况
      data.planInfoData.show = false;
      // 选择数据
      data.scheduleData = [];
      // 点位数据
      data.planInfoData.data = [];
      // 隐藏对应图层的图标
      props.addschedulePoint(data.planName, [], false);
    };

    onUnmounted(() => {
      clearData();
    });

    return {
      ...toRefs(data),
      webToUeMessige,
      planDetails,
      lookSchedule,
      checkedPlanNum
    };
  }
});
</script>

<style scoped lang="less">
.yield {
  width: 100%;
  height: 100%;
  user-select: none;

  .ui_left,
  .ui_right {
    pointer-events: auto;
    width: 95%;
    height: calc(100% - 10px);
    padding: 5px 10px;

    .nape_content {
      width: 100%;
      padding-bottom: 10px;
      .content_title {
        width: 100%;
        height: 35px;
        background: url('../../assets/img/contentTitle.png') no-repeat center;
        background-size: 100% 100%;

        span {
          margin-left: 40px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          line-height: 25px;
          background-image: -webkit-linear-gradient(
            top,
            rgb(238, 252, 255) 50%,
            #6ae4ff
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .center_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        height: calc(100% - 35px);
        margin-top: 5px;
        .query_box {
          color: white;
          display: flex;
          justify-content: space-between;
          padding: 0 5px;
          .select_box {
            margin-right: 10px;
            display: flex;
            align-items: center;
            background: linear-gradient(
              to top,
              rgba(0, 137, 191, 0.1),
              rgb(0, 100, 140, 0.1)
            );
            border: 1px rgba(0, 229, 255, 0.9) solid;
            border-radius: 5px;
            overflow: hidden;
            .sel_item {
              height: 23px;
              line-height: 23px;
              padding: 0px 8px;
              white-space: nowrap;
              cursor: pointer;
            }
            .active {
              background: linear-gradient(
                to top,
                rgba(0, 106, 255, 0.5),
                rgb(0, 183, 255, 0.5)
              );
            }
          }
          .ant-picker {
            border-color: rgba(0, 229, 255, 0.9);
            height: 25px;
          }
          .ant-picker-range {
            width: calc(100% - 160px);
            background: linear-gradient(
              to top,
              rgba(0, 107, 149, 0.1),
              rgb(0, 100, 140, 0.1)
            );
          }
          .ant-picker-focused {
            border-color: rgba(0, 187, 255, 0.9);
          }
          :deep(.ant-picker-active-bar) {
            background: #00eeff;
            bottom: 0px;
          }
          :deep(.ant-picker .ant-picker-input > input) {
            color: white !important;
          }
          :deep(.ant-picker-suffix) {
            color: white;
          }
          :deep(.ant-picker-separator) {
            color: white;
          }
        }
        .table_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          font-size: 14px;
          padding: 0 5px;

          .tableHead {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 18%;
              font-size: 16px;
              text-align: center;
              color: #bde5fe;
            }
          }

          .tableContent {
            width: 100%;
            height: calc(100% - 36px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
            .tableItem {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 3px 0;
              transform-origin: 0 100%;

              .textContent {
                overflow: hidden;
                width: 18%;
                line-height: 30px;
                height: 30px;

                span {
                  text-align: center;
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  transition: all 3s linear;
                  color: #6ae4ff;
                }
              }

              &:nth-child(odd) {
                background: rgba(255, 255, 255, 0.2);
              }

              &:hover {
                cursor: pointer;
                background: rgba(0, 174, 240, 0.6);

                .scrollText {
                  animation: scroll-left 3s linear infinite;
                  overflow: visible;
                }
              }

              @keyframes move_tableItem {
                0% {
                  transform: translateX(260px) skewX(-60deg);
                  opacity: 0;
                }

                100% {
                  transform: translateX(0px) skewX(0deg);
                  opacity: 1;
                }
              }

              @keyframes scroll-left {
                from {
                  transform: translateX(0);
                }

                to {
                  transform: translateX(-150%);
                }
              }
            }

            .active {
              background: rgba(0, 174, 240, 0.6) !important;
            }
          }
        }
        .pro_box{
          height: calc(100% - 25px);
        }
      }
    }
  }

  .ui_left {
    .nape_content {
      &:nth-child(1) {
        height: 50%;
      }
      &:nth-child(2) {
        height: 50%;
      }
    }
  }
  .ui_right {
    .nape_content {
      height: 50%;
    }
  }

  .scheduling {
    width: 40%;
    height: 100px;
    position: absolute;
    left: 25%;
    bottom: 50px;
    // background: rgba(2, 183, 255, 0.2);
    overflow: auto;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: center;
    .count_box {
      display: flex;
      .box_item {
        width: 100px;
        text-align: center;
        position: relative;
        .num_rate {
          font-size: 12px;
          color: rgb(0, 240, 112);
          font-weight: bold;
          span {
            font-size: 16px;
          }
        }
        .num_checked {
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .num_time {
          height: 30%;
          font-size: 16px;
          color: #ffffff;
        }
        &::before {
          content: '';
          width: 100%;
          height: 5px;
          background: linear-gradient(rgb(0, 179, 255) 20%, rgb(1, 86, 207));
          position: absolute;
          bottom: 50%;
          left: 0;
        }
        &:first-child {
          &::after {
            content: '';
            height: 10px;
            width: 10px;
            background: radial-gradient(rgb(0, 213, 255) 20%, rgb(0, 89, 255));
            position: absolute;
            bottom: 50%;
            left: -1px;
            transform: translateY(25%);
            border-radius: 50%;
          }
        }
        &:last-child {
          &::after {
            content: '';
            height: 10px;
            width: 10px;
            background: radial-gradient(rgb(0, 213, 255) 20%, rgb(0, 89, 255));
            position: absolute;
            bottom: 50%;
            right: -1px;
            transform: translateY(25%);
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>
